/**
 * @date: 2024/6/21
 * @author: 小红
 * @fileName: photos
 * @Description: 图库
 */

@use '../core';
@use "../core/util";
@use "../modules/components";

.photos {
  .main > .content {
    padding: 0;

    > .head {
      padding: 20px 15px 15px;
      position: relative;

      > .title {
        position: relative;
        width: 80px;
        height: 28px;
        background-color: var(--theme);
        color: #fff;
        text-align: center;
        margin-bottom: 20px;
        left: -25px;

        &::before {
          content: "";
          position: absolute;
          bottom: -10px;
          left: -10px;
          border-style: solid;
          border-width: 10px;
          border-color: var(--theme) transparent transparent;
          transform: rotate(90deg);
        }
      }


    }


    .groups {
      display: grid;
      gap: 15px;
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      border-top: 1px solid #ebeef5;
      padding-top: 15px;

      @include util.useThemeVar((
        group-background-color: (#f2f6fc, #303030),
        group-text-color: (#606266, #fff),
      ));


      &-item {
        @include util.text-overflow;
        user-select: none;
        background-color: var(--group-background-color);
        color: var(--group-text-color);
        height: 28px;
        line-height: 28px;
        border-radius: 14px;
        cursor: pointer;
        font-size: 12px;
        padding: 0 15px;
        text-align: center;
        transition: color 0.35s, background 0.35s, box-shadow 0.35s, transform 0.35s;

        &.active {
          color: #fff;
          transform: translateY(-2px);
          background: var(--theme);
          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .imgs {
      display: grid;
      gap: 15px;
      grid-template-columns: repeat(4, 1fr);
      padding: 15px 0;

      @include util.useResponsive($width: util.$w-xl) {
        grid-template-columns: repeat(3, 1fr);
      }

      @include util.useResponsive($width: util.$w-md, $level: '#&') {
        grid-template-columns: repeat(2, 1fr);
      }

      span[data-fancybox=fancyBoxImg] {
        position: relative;
        display: block;
        overflow: hidden;
        border-radius: 5px;
        --dot-gif: url();
        cursor: zoom-in;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        &::before {
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0);
          transition: background 0.35s;
          z-index: 20;
          width: 100%;
          height: 100%;
          border-radius: 5px;
          background-repeat: no-repeat;
          background-position: center center;
        }

        &:hover::before {
          background-color: rgba(0, 0, 0, 0.5);
          background-image: var(--dot-gif);
        }
      }
    }

  }
}